import {useRef} from 'react'
import * as THREE from 'three'
import Zjl from '../ping.module.css'
let App=({intersectsRef,canvasRef,lastTouchX,lastTouchY})=>{
    let isDragging = useRef(false);
        //鼠标按下时
    let handleMouseDown=()=>{
        if(intersectsRef.current){
            isDragging.current=true
        }
    }
    
    let handleMouseMove = (event) => {
        const touch = event.touches[0];
        let jix=touch.clientX-lastTouchX.current
        let jiz=touch.clientY-lastTouchY.current
        lastTouchX.current=touch.clientX
        lastTouchY.current=touch.clientY
        if (isDragging.current && intersectsRef.current) {
            const scaleFactorZ = jiz* 4;
            const scaleFactorX = jix * 4;
            const positionAttribute = intersectsRef.current.position;
            positionAttribute.z += scaleFactorZ;  // 增长的量
            positionAttribute.x += scaleFactorX; 
        }
    }
        //鼠标抬起时
    let handleMouseUp=()=>{
        isDragging.current =false
        canvasRef.current.children[0].removeEventListener('touchstart', handleMouseDown);
        canvasRef.current.children[0].removeEventListener('touchmove', handleMouseMove);
        canvasRef.current.children[0].removeEventListener('touchend', handleMouseUp);
    }
    let long=()=>{
        canvasRef.current.children[0].addEventListener('touchstart', handleMouseDown);
        canvasRef.current.children[0].addEventListener('touchmove', handleMouseMove);
        canvasRef.current.children[0].addEventListener('touchend', handleMouseUp);
    }
    return (
        <>
            <h4 onClick={long} className={`${Zjl.h4}`}>移动</h4>
        </>
    )
}
export default App
